<template>
  <el-container style="min-height: 100vh">

    <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
      <el-menu router
               :default-active="$route.path"
               :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
               background-color="#4095E5"
               text-color="#fff"
               active-text-color="#ffd04b"
               :collapse-transition="false"
               :collapse="isCollapse"
      >
        <div style="height: 60px; line-height: 60px; text-align: center">
          <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; right: 5px">
          <b style="color: white" v-show="logoTextShow">教师管理系统</b>
        </div>
        <el-menu-item index="StudentView">
          <template slot="title">
            <i class="el-icon-message"></i>
            <span slot="title">学生管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">成绩管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/CheckpointView">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">关卡管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/CheckpointContentView">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">内容管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/MultiQuestionView">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">试题管理</span>
          </template>
        </el-menu-item>

        <el-menu-item index="1">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">通知管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="1">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">班级管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="TeacherView">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">个人信息管理</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
        <div style="flex: 1; font-size: 20px">
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>
        <el-dropdown style="width: 70px; cursor: pointer">
          <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">个人信息</el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>

      <el-main>
        <div style="margin: 0px;width:100%;height:45px;text-align:center;background: #4095E5">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>试题管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div>
          <el-tabs v-model="activeName">
            <el-tab-pane name="first">
              <span slot="label"><i class="el-icon-circle-plus"></i>添加试题</span>
              <section class="append">
                <ul>
                  <li>
                    <span>题目类型:</span>
                    <el-select v-model="optionValue" placeholder="请选择题型" class="w150">
                      <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </li>
                  <li v-if="optionValue == '选择题'">
                    <span>科目：</span>
                    <el-input
                        placeholder="请输入对应科目"
                        v-model="postChange.subject"
                        class="w150"
                        clearable>
                    </el-input>
                  </li>
                  <li v-if="optionValue == '选择题'">
                    <span>章节：</span>
                    <el-input
                        placeholder="请输入对应章节"
                        v-model="postChange.section"
                        class="w150"
                        clearable>
                    </el-input>
                  </li>
                  <li v-if="optionValue == '判断题'">
                    <span>科目：</span>
                    <el-input
                        placeholder="请输入对应科目"
                        v-model="postJudge.subject"
                        class="w150"
                        clearable>
                    </el-input>
                  </li>
                  <li v-if="optionValue == '判断题'">
                    <span>章节：</span>
                    <el-input
                        placeholder="请输入对应章节"
                        v-model="postJudge.section"
                        class="w150"
                        clearable>
                    </el-input>
                  </li>
                  <li v-if="optionValue == '编程题'">
                    <span>科目：</span>
                    <el-input
                        placeholder="请输入对应科目"
                        v-model="postProgram.subject"
                        class="w150"
                        clearable>
                    </el-input>
                  </li>
                  <li v-if="optionValue == '编程题'">
                    <span>章节：</span>
                    <el-input
                        placeholder="请输入对应章节"
                        v-model="postProgram.section"
                        class="w150"
                        clearable>
                    </el-input>
                  </li>
                  <li v-if="optionValue == '选择题'">
                    <span>难度等级:</span>
                    <el-select v-model="postChange.level" placeholder="选择难度等级" class="w150">
                      <el-option
                          v-for="item in levels"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </li>
                  <li v-if="optionValue == '判断题'">
                    <span>难度等级:</span>
                    <el-select v-model="postJudge.level" placeholder="选择难度等级" class="w150">
                      <el-option
                          v-for="item in levels"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </li>
                  <li v-if="optionValue == '编程题'">
                    <span>难度等级:</span>
                    <el-select v-model="postProgram.level" placeholder="选择难度等级" class="w150">
                      <el-option
                          v-for="item in levels"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </li>
                  <li v-if="optionValue == '选择题'">
                    <span>正确选项:</span>
                    <el-select v-model="postChange.rightAnswer" placeholder="选择正确答案" class="w150">
                      <el-option
                          v-for="item in rights"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </li>
                </ul>
                <!-- 选择题部分 -->
                <div class="change" v-if="optionValue == '选择题'">
                  <div class="title">
                    <el-tag>题目:</el-tag><span></span>
                    <el-input
                        type="textarea"
                        rows="4"
                        v-model="postChange.question"
                        placeholder="请输入题目内容"
                        resize="none"
                        class="answer">
                    </el-input>
                  </div>
                  <div class="options">
                    <ul>
                      <li>
                        <el-tag type="success">A</el-tag>
                        <el-input
                            placeholder="请输入选项A的内容"
                            v-model="postChange.answerA"
                            clearable="">
                        </el-input>
                      </li>
                      <li>
                        <el-tag type="success">B</el-tag>
                        <el-input
                            placeholder="请输入选项B的内容"
                            v-model="postChange.answerB"
                            clearable="">
                        </el-input>
                      </li>
                      <li>
                        <el-tag type="success">C</el-tag>
                        <el-input
                            placeholder="请输入选项C的内容"
                            v-model="postChange.answerC"
                            clearable="">
                        </el-input>
                      </li>
                      <li>
                        <el-tag type="success">D</el-tag>
                        <el-input
                            placeholder="请输入选项D的内容"
                            v-model="postChange.answerD"
                            clearable="">
                        </el-input>
                      </li>
                    </ul>
                  </div>
                  <div class="title">
                    <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
                    <el-input
                        type="textarea"
                        rows="4"
                        v-model="postChange.analysis"
                        placeholder="请输入答案解析"
                        resize="none"
                        class="answer">
                    </el-input>
                  </div>
                  <div class="submit">
                    <el-button type="primary" @click="changeSubmit(),jump()">立即添加</el-button>
                  </div>
                </div>

                <div class="change judge" v-if="optionValue == '判断题'">
                  <div class="title">
                    <el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span>
                    <el-input
                        type="textarea"
                        rows="4"
                        v-model="postJudge.question"
                        placeholder="请输入题目内容"
                        resize="none"
                        class="answer">
                    </el-input>
                  </div>
                  <div class="judgeAnswer">
                    <el-radio v-model="postJudge.answer" label="T">正确</el-radio>
                    <el-radio v-model="postJudge.answer" label="F">错误</el-radio>
                  </div>
                  <div class="title">
                    <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
                    <el-input
                        type="textarea"
                        rows="4"
                        v-model="postJudge.analysis"
                        placeholder="请输入答案解析"
                        resize="none"
                        class="answer">
                    </el-input>
                  </div>
                  <div class="submit">
                    <el-button type="primary" @click="judgeSubmit(),jump()">立即添加</el-button>
                  </div>
                </div>

                <div class="change program" v-if="optionValue == '编程题'">
                  <div class="title">
                    <el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span>
                    <el-input
                        type="textarea"
                        rows="4"
                        v-model="postProgram.question"
                        placeholder="请输入题目内容"
                        resize="none"
                        class="answer">
                    </el-input>
                  </div>
                  <div class="submit">
                    <el-button type="primary" @click="programSubmit(),jump()">立即添加</el-button>
                  </div>
                </div>
              </section>
            </el-tab-pane>
            <el-tab-pane name="second">
              <span slot="label"><i class="iconfont icon-daoru-tianchong"></i>在线组卷</span>
              <div class="box">
                <ul>
                  <li>
                    <span>试题难度:</span>
                    <el-select v-model="difficultyValue" placeholder="试题难度" class="w150">
                      <el-option
                          v-for="item in difficulty"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </li>
                  <li>
                    <span>选择题数量：</span> <el-input type="text" v-model="changeNumber"></el-input>
                  </li>

                  <li>
                    <span>判断题数量：</span> <el-input type="text" v-model="judgeNumber"></el-input>
                  </li>
                  <li>
                  <li>
                    <span>编程题数量：</span> <el-input type="text" v-model="programNumber"></el-input>
                  </li>
                  <li>
                    <el-button type="primary" @click="create()">立即组卷</el-button>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>


export default {
  name: 'SyView',
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 8,
      form: {},
      dialogFormVisible: false,
      multipleSelection: [],
      msg: "hello",
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      headerBg: 'headerBg',

      changeNumber: '', //选择题出题数量
      judgeNumber: '', //判断题出题数量
      programNumber:'',
      activeName: 'first',  //活动选项卡
      options: [ //题库类型
        {
          value: '选择题',
          label: '选择题'
        },
        {
          value: '判断题',
          label: '判断题'
        },
        {
          value: '编程题',
          label: '编程题'
        },
      ],
      difficulty: [ //试题难度
        {
          value: '简单',
          label: '简单'
        },
        {
          value: '一般',
          label: '一般'
        },
        {
          value: '困难',
          label: '困难'
        }
      ],
      difficultyValue: '简单',
      levels: [ //难度等级
        {
          value: '1',
          label: '1'
        },
        {
          value: '2',
          label: '2'
        },
        {
          value: '3',
          label: '3'
        },
        {
          value: '4',
          label: '4'
        },
        {
          value: '5',
          label: '5'
        },
      ],
      rights: [ //正确答案
        {
          value: 'A',
          label: 'A'
        },
        {
          value: 'B',
          label: 'B'
        },
        {
          value: 'C',
          label: 'C'
        },
        {
          value: 'D',
          label: 'D'
        },
      ],
      paperId: null,
      optionValue: '选择题', //题型选中值
      subject: '', //试卷名称用来接收路由参数
      itemdata: {
        changeNumber: this.changeNumber,
        judgeNumber: this.judgeNumber,
        programNumber: this.programNumber,
        paperId: this.paperId,
        subject: '' //题目数量太少，指定为计算机网络出题
      },
      postChange: { //选择题提交内容
        subject: '', //试卷名称
        level: '', //难度等级选中值
        rightAnswer: '', //正确答案选中值
        section: '', //对应章节
        question: '', //题目
        analysis: '', //解析
        answerA: '',
        answerB: '',
        answerC: '',
        answerD: '',
      },

      postJudge: { //判断题提交内容
        subject: '', //试卷名称
        level: '', //难度等级选中值
        answer: '', //正确答案
        section: '', //对应章节
        question: '', //题目
        analysis: '', //解析
      },
      postProgram: { //判断题提交内容
        subject: '', //试卷名称
        level: '', //难度等级选中值
        answer: '', //正确答案
        section: '', //对应章节
        question: '', //题目
      },
      postPaper: { //考试管理表对应字段
        paperId: null,
        questionType: null, // 试卷类型 1--选择题    2--判断题
        questionId: null,
      }
    };
  },
  created() {
    this.getParams()
  },
  methods: {

    collapse() {  // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {  // 收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {   // 展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },

    create() {
      this.request.post("/pygram/item/item", this.itemdata).then(res => {
        console.log(res)
        let data = res.data
        if (data.code == 200) {
          setTimeout(() => {
            this.$router.push({path: '/Home1'})
          }, 1000)
          this.$message({
            message: data.message,
            type: 'success'
          })
        } else if (data.code == 400) {
          this.$message({
            message: data.message,
            type: 'error'
          })
        }
      })
    },


    getParams() {
      let subject = this.$route.query.subject //获取试卷名称
      let paperId = this.$route.query.paperId //获取paperId
      this.paperId = paperId
      this.subject = subject
      this.postPaper.paperId = paperId
    },

    changeSubmit() {
      this.request.post("/pygram/multi-question//MultiQuestion", this.postChange).then(res => {
        if (res) {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    jump() {
      this.$router.push('/MultiQuestionView')
    },
  judgeSubmit() {
      this.request.post("/pygram/judge-question//judgeQuestion", this.postJudge).then(res => {
        if (res) {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    programSubmit() {
      this.request.post("/pygram/program-question//programQuestion", this.postProgram).then(res => {
        if (res) {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
  }
}
</script>

<style>
.headerBg {
  background: #eee!important;
}
</style>